<template>
  <div class="VueToNuxtLogo">
    <div class="circles">
      <div>
        <div>
          <div>
            <div>
              <div />
            </div>
          </div>
        </div>
      </div>
    </div>
    <div
      :class="fadeIns"
      class="left">
      <img src="~/static/img/shadow-mockup.png">
    </div>
    <div class="right">
      <div>
        <h1 
          v-show="showA"
          class="show" >邀好友，领红包</h1>
        <h4 
          v-show="showB"
          class="show" >新用户注册登陆领红包，推荐好友注册更能赚佣金</h4>
      </div>
      <img 
        v-show="showC" 
        class="show" 
        src="~/static/img/web_bg_triangle.png">
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      fadeIns: 'animated slow fadeInDownBig',
      showIn: false,
      showA: false,
      showB: false,
      showC: false
    }
  },
  mounted() {
    this.fadeIns = 'animated slow fadeInDownBig'
    this.time = setTimeout(() => {
      this.showA = true
    }, 1600)
    setTimeout(() => {
      this.showB = true
    }, 1900)
    setTimeout(() => {
      this.showC = true
    }, 2100)
  }
}
</script>


<style lang="scss" scoped>
@media screen and (min-width: 1920px) {
  .right {
    img {
      bottom: 15rem !important;
    }
  }
}
@media screen and (min-width: 1600px) and (max-width: 1910px) {
  .right {
    img {
      bottom: 20rem !important;
    }
  }
}
@media screen and (max-width: 1022px) {
  .VueToNuxtLogo {
    background-color: #ffffff;
    display: initial !important;
    .right {
      margin-left: 30%;
      img {
        width: 8rem;
        margin: auto;
      }
      h1 {
        height: 4rem;
        font-size: 4.83rem;
        font-family: STYuanti-SC-Bold;
        font-weight: bold;
        color: black;
        line-height: 4rem;
        letter-spacing: 1px;
        margin-bottom: 1rem;
      }
      h4 {
        color: #868686;
        font-size: 2.5rem;
      }
    }
    .left {
      text-align: center;
      img {
        width: 65% !important;
        left: 0 !important;
        right: 0 !important;
        margin: 6rem auto 0;
      }
    }
  }
  .circles {
    position: absolute;
    left: 0 !important;
    width: 35rem;
    height: 35rem;
    border: 2px solid rgba(248, 231, 28, 0.3);
    border-radius: 50%;
    right: 0 !important;
    margin: auto;
    top: 15rem !important;
    div {
      width: 32rem;
      height: 32rem;
      border: 2px solid rgba(248, 231, 28, 0.5);
      left: 0;
      right: 0;
      margin: 1.5rem auto;
      border-radius: 50%;
      div {
        width: 29rem;
        height: 29rem;
        border: 2px solid rgba(248, 231, 28, 0.7);
        left: 0;
        right: 0;
        margin: 1.5rem auto;
        border-radius: 50%;
        div {
          width: 26rem;
          height: 26rem;
          border: 2px solid rgba(248, 231, 28, 0.9);
          left: 0;
          right: 0;
          margin: 1.5rem auto;
          border-radius: 50%;
          div {
            width: 23rem;
            height: 23rem;
            border: 2px solid rgb(248, 231, 28);
            left: 0;
            right: 0;
            margin: 1.5rem auto;
            border-radius: 50%;
            div {
              width: 20rem;
              height: 20rem;
              border: 2px solid rgb(248, 231, 28);
              left: 0;
              right: 0;
              margin: 1.5rem auto;
              border-radius: 50%;
            }
          }
        }
      }
    }
  }
}
@media screen and (width: 1024px) {
  .right {
    margin-right: 20rem;
    img {
      width: 5rem;
      position: absolute;
      right: 20rem;
      bottom: auto !important;
      margin: auto;
    }
  }
}
@media screen and (min-width: 1024px) {
  .VueToNuxtLogo {
    background-color: #ffffff;
    display: flex;
    align-items: center;
    justify-content: space-between;
    .right {
      margin-right: 20rem;
      img {
        width: 5rem;
        position: absolute;
        right: 20rem;
        bottom: 20rem;
        margin: auto;
      }
      h1 {
        width: 23.75rem;
        height: 4rem;
        font-size: 2.83rem;
        font-family: STYuanti-SC-Bold;
        font-weight: bold;
        color: black;
        line-height: 4rem;
        letter-spacing: 1px;
        margin-bottom: 1rem;
      }
      h4 {
        color: #868686;
      }
    }
    .left {
      margin-left: 10rem;
      img {
        width: 26rem;
        margin: 7rem;
      }
    }
  }
  .circles {
    position: absolute;
    left: 14rem;
    width: 35rem;
    height: 35rem;
    border: 2px solid rgba(248, 231, 28, 0.18);
    border-radius: 50%;
    div {
      width: 32rem;
      height: 32rem;
      border: 2px solid rgba(248, 231, 28, 0.22);
      left: 0;
      right: 0;
      margin: 1.5rem auto;
      border-radius: 50%;
      div {
        width: 29rem;
        height: 29rem;
        border: 2px solid rgba(248, 231, 28, 0.43);
        left: 0;
        right: 0;
        margin: 1.5rem auto;
        border-radius: 50%;
        div {
          width: 26rem;
          height: 26rem;
          border: 2px solid rgba(248, 231, 28, 0.53);
          left: 0;
          right: 0;
          margin: 1.5rem auto;
          border-radius: 50%;
          div {
            width: 23rem;
            height: 23rem;
            border: 2px solid rgba(248, 231, 28, 088);
            left: 0;
            right: 0;
            margin: 1.5rem auto;
            border-radius: 50%;
            div {
              width: 20rem;
              height: 20rem;
              border: 2px solid rgb(248, 231, 28);
              left: 0;
              right: 0;
              margin: 1.5rem auto;
              border-radius: 50%;
            }
          }
        }
      }
    }
  }
}
.show {
  animation: fadeIn 4s;
}
@keyframes fadeIn {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}
</style>
